<template>
  <div class="app-container">
    <!-- <div class="header_title_box">
      <h2>基本信息</h2>
    </div> -->
    <!-- 搜索 -->
    <div class="select_form_box">
      <div class="filter-container">
        <el-input v-model.trim="queryParam.order_no" size="small" placeholder="订单编号" class="input-with-select mr16" @keyup.enter.native="getList()" />
        <el-button size="small" type="primary" class="filter-item search" icon="el-icon-search" @click="getList()">
          搜索
        </el-button>
        <el-button size="small" icon="el-icon-refresh" @click="handleRefresh">重置</el-button>
      </div>
    </div>
    <!-- 导出 -->
    <div class="operation_button_box mb10">
      <el-button v-action="'Settlement@orderFeeExport'" size="small" type="primary" :loading="exportLoading" @click="handleExport">导出</el-button>
    </div>
    <div v-loading="loading">
      <el-table :data="data" border fit :max-height="screenHeigh">
        <el-table-column type="selection" width="51" align="center" />
        <el-table-column label="订单编号" prop="order_no" align="center" width="180">
          <template slot-scope="scope">
            <code-item :code="scope.row.order_no" @click="toInfo(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column label="原平台订单编号" prop="platform_no" align="center" width="180" />
        <el-table-column label="商品sku" prop="goods_code" align="center" width="180" />
        <el-table-column label="名称" prop="name_ch" align="center" width="180" show-overflow-tooltip />
        <el-table-column label="分类" prop="category" align="center" width="180" show-overflow-tooltip />
        <el-table-column label="所属店铺" prop="shop_name" align="center" width="150" />
        <el-table-column label="所属客户" prop="company" align="center" width="220" show-overflow-tooltip />
        <el-table-column label="物流单号" prop="shipping_code" align="center" width="210" />
        <el-table-column label="物流费用(USD）" prop="order_logistics_fee" align="center" width="185">
          <template slot-scope="scope">
            {{ scope.row.order_logistics_fee | toThousandFilter }}
          </template>
        </el-table-column>
        <el-table-column label="订单操作费用(USD)" prop="order_operation_fee" align="center" width="187">
          <template slot-scope="scope">
            {{ scope.row.order_operation_fee | toThousandFilter }}
          </template>
        </el-table-column>
        <!-- <el-table-column label="保费(USD)" prop="hedge_fee" align="center" width="187">
          <template slot-scope="scope">
            {{ scope.row.hedge_fee | toThousandFilter }}
          </template>
        </el-table-column> -->
        <el-table-column label="费用合计(USD)" prop="total_fee" align="center" width="182">
          <template slot-scope="scope">
            {{ scope.row.total_fee | toThousandFilter }}
          </template>
        </el-table-column>
        <el-table-column label="减扣额度" prop="trans_stock" align="center" min-width="188">
          <template slot-scope="scope">
            <!-- {{ ((+scope.row.order_logistics_fee) + (+scope.row.order_operation_fee)) | toThousandFilter }} -->
            {{ scope.row.quota | toThousandFilter }}
          </template>
        </el-table-column>
        <el-table-column label="Zone" prop="zone" align="center" min-width="118" />
        <el-table-column label="创建时间" prop="created_at" align="center" min-width="171" />
      </el-table>
      <el-pagination v-if="paginate.total > 0" class="pagination_box" background :current-page="paginate.current" :page-sizes="[50, 100, 200, 500]" layout="total, sizes, prev, pager, next, jumper" :total="paginate.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <!--下载字段选择-->
    <DownModul :url="exportUrl" :search-param="downLoadParams" :form-visible-down.sync="formVisibleDown" titel="导出字段选择" :options-modul="optionsModul" />
  </div>
</template>

<script>
import formOperate from '../../../layout/mixin/formOperate'
import codeItem from '../../../components/base/code'
import cacheList from '@/layout/mixin/cacheList'
import { action } from '@/directive/permission/index.js' // 权限判断指令
import DownModul from '@/components/DownModul/index.vue'
export default {
  name: 'OrderFee',
  components: {
    codeItem,
    DownModul
  },
  directives: {
    action
  },
  mixins: [formOperate, cacheList],
  data() {
    return {
      otherHeight: 380,
      componentName: 'OrderFee',
      url: '/settlement/order-fee',
      queryParam: {
        order_no: '',
        page: 1,
        limit: 50
      },
      exportUrl: '/settlement/order-fee-export',
      cachePaths: [
        '/settlement/orderFee/info'
      ],
      optionsModul: [
        {
          key: 'goods_code',
          label: '商品SKU'
        },
        {
          key: 'name_ch',
          label: '商品名称'
        },
        {
          key: 'category',
          label: '分类'
        },
        {
          key: 'company',
          label: '所属客户'
        },
        {
          key: 'shipping_code',
          label: '物流单号'
        },
        {
          key: 'order_no',
          label: '订单编号'
        },
        {
          key: 'order_logistics_fee',
          label: '物流费用（USD'
        },
        {
          key: 'order_operation_fee',
          label: '订单操作费用（USD'
        },
        {
          key: 'total_fee',
          label: '费用合计'
        },
        {
          key: 'quota',
          label: '扣减额度'
        }
      ]
    }
  },
  activated() {
    this.getList()
  },
  methods: {
    // 导出
    handleExport() {
      const vm = this
      const { order_no } = vm.queryParam
      const params = { order_no }
      //   vm.handleExportxlsx(vm.exportUrl, params)
      vm.downLoadParams = params
      vm.formVisibleDown = true
    },
    // 去详情
    toInfo(row) {
      const vm = this
      vm.$router.push({ path: `/settlement/orderFee/info/${row.order_deliver_id}` })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
